<!DOCTYPE html>
<html>

<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style>
		.feedback-overlay-black {
			background-color: #000;
			opacity: 0.5;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			margin: 0;
		}
	</style>

	<style>
		div {
			padding: 20px;
			margin: 0 auto;
			border: 5px solid black;
		}

		h1 {
			border-bottom: 2px solid white;
		}

		h2 {
			background: #efefef;
			padding: 10px;
		}
	</style>
</head>

<body>
	<div id="html" style="background: red;">
		<div style="background: green;">
			<div style="background: blue; border-color: white;">
				<div style="background: yellow;">
					<div style="background: orange;">
						<h1>Heading</h1>
						Text that isn't wrapped in anything.
						<p>
							Followed by some text wrapped in a <b>&lt;p&gt; paragraph.</b>
						</p>
						<p>
							Maybe add a <a href="https://parall.ax/">Parallax</a> or a different style of <a href="#"
								style='font-weight: 700; color: purple; font-size: 2em' id="highlight">link with a
								highlight</a>.
						</p>
						<hr />
						<h2>More content</h2>
						<div style="width: 10px; height: 10px; border-width: 10px; padding: 0;">a</div>
					</div>
				</div>

			</div>

		</div>
	</div>


	<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
	<script src='../../dist/jspdf.debug.js'></script>

	<script>
		var pdf = new jsPDF('p', 'pt', 'letter');
		var width = 600;
		document.body.style.width = width + "px";

		pdf.html(document.body, {
			callback: function (pdf) {
				var iframe = document.createElement('iframe');
				iframe.setAttribute('style', 'position:absolute;top:0;right:0;height:100%; width:600px');
				document.body.appendChild(iframe);
				iframe.src = pdf.output('datauristring');
			}
		});
	</script>
</body>

</html>